<div class="content">
  <div class="row large-collapse">
    <div class="small-12 columns title-heading">
      <h1 class="bold">{{astroboxName}} · Maintenance Menu</h1>
    </div>
  </div>

  {% if mfDefinition.variant.allow_menu_upload %}
    <div class="file-upload-view">
      <div class="row upload-buttons">
        <div class="small-12 large-5 medium-centered columns">
          <span class="file-upload-button button success radius expand" style="margin-bottom: 10px">
            <i class="icon-plus"></i> Upload New Menu ( <span class="extensions">.zip</span> )
            <input class="file-upload" type="file" name="file" accept=".zip">
          </span>
        </div>
      </div>
      <div class="row upload-progress" style="display:none">
        <div class="small-12 large-10 large-centered columns">
          <div class="progress radius">
            <div class="meter" style="width: 0%"></div>
          </div>
          <div class="progress-message" align="center">
            <i class="icon-rocket-spinner animate-spin"></i> <span></span>
          </div>
        </div>
      </div>
    </div>
  {% endif %}

  <div id="menu-list" class="row menu-list-view small-block-grid-1">
    <div id="back-button" style="display: none"> <i class="icon-angle-left"></i></div>
    <div class="error-message bold" style="display: none" >
      <span id="no-menu" >No maintenance menu was found. Use the button above to upload yours.</span>
      <span id="menu-error" >The menu loaded <u>does not have a corret data structure</u>. Check the documentation to know the required structure and upload it again.</span>
    </div>
    <ul id="menu-rows-container"></ul>
  </div>

  <script type="text/template" id="maintenance-menu-row-template">
    <a class="launch">
      <div class="app-image">
        <% if (icon) { %>
          <% if (type == 'task') { %>
            <img src="/static/img/variant/<%= id %>/<%= icon %>"/>
          <% } else { %>
            <img src="/static/img/variant/utilities_menu/<%= icon %>"/>
          <% } %>
        <% } %>
        <div class="overlay">
          <% if (type == 'task' && name != 'not_found') { %>
            <h4 class="bold">Launch</h4>
          <%  } %>
        </div>
      </div>
      <h5 class="name bold"><%= name != 'not_found' ? name : 'Task [' + id + '] not installed' %></h5> <i class="icon-angle-right"></i>
    </a>
  </script>

  <div class="no-connection-overlay">
    <i class="icon-usb"></i>
    <b>Please, connect a 3D Printer via USB.</b>
  </div>
</div>

